<template>
  <div>
    <div class="form-box">
      <el-form label-position="top" label-width="80px" :model="blogForm">
        <el-form-item label="文章标题">
          <el-input v-model="blogForm.title" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="文章摘要" style="width: 500px">
          <el-input
            type="textarea"
            show-word-limit
            :rows="2"
            maxlength="300"
            v-model="blogForm.article"
          />
        </el-form-item>
        <el-form-item label="文章头图" style="width: 500px">
          <el-upload
            ref="elUpload"
            class="upload-demo"
            action="/file/upload"
            name="file"
            :headers="{ authorization: token }"
            :on-success="handleUploadSuccess"
            :file-list="fileList"
            :limit="1"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传一张作为头图哦</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <TagsWrapper
        ref="tagsWrapper"
        :tag-type="1"
        :total-tag="tags"
        :select-tag="selectTag"
        @change-select-tag="changeSelectTag"
      />
    </div>
    <v-md-editor
      @upload-image="handleUploadImage"
      :disabled-menus="[]"
      class="md"
      v-model="blogForm.content"
      height="400px"
    />
    <div class="edit-btn">
      <el-button type="danger">清空</el-button>
      <el-button type="success" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { uploadImg } from "@/network/upload";
import TagsWrapper from "@/components/TagsWrapper";
import { useTagsDataHook, useBlogFormEffect } from "./edit-hooks";
import { useRoute, useRouter } from "vue-router";

export default {
  components: {
    TagsWrapper,
  },
  setup() {
    const token = ref(sessionStorage.getItem("token"));
    const route = useRoute();
    const router = useRouter();
    const { getTagsDataFunc, tags } = useTagsDataHook();

    const handleUploadImage = async (event, insertImage, files) => {
      const res = await uploadImg(files[0]);
      insertImage({
        url: res.filepath,
        desc: "图片",
      });
    };

    getTagsDataFunc();
    // console.log(route);
    return {
      token,
      tags,
      handleUploadImage,
      ...useBlogFormEffect(route, router),
    };
  },
};
</script>

<style scoped>
.form-box {
  width: 80%;
  margin: 0 auto;
}
.md {
  width: 90%;
  margin: 0 auto;
}
.edit-btn {
  margin: 3rem 0;
  width: 80%;
  display: flex;
  justify-content: flex-end;
}
</style>